<template>
    <view class="header">
        <image class="img-title" src="../../static/icon/back-btn.png" @click="navigateBack" mode="" />
        <view class="title">{{ $t('index.nav.hongli') }}</view>
    </view>
    <view class="swiper-item">
        <view v-for="(ele, i) in applyInfo" :key="i" class="itemBox item1" @click="routerTodetail(ele.stockCode, ele.id)">
            <view class="first-line">
                <view class="left">
                    <view class="stock-name">{{ ele.stockName }}</view>
                    <view class="stock-code">{{ ele.symbol }}</view>
                </view>
            </view>
            <view class="second-line">
                <view class="view marketPrice">
                    <view class="key">{{ $t('market.hongli.marketPrice') }}</view>
                    <view class="value">{{ ele.buyPrice }}</view>
                </view>
                <view class="view total">
                    <view class="key">{{ $t('market.hongli.total') }}</view>
                    <view class="value">{{ `${ele.priNum} ${$t('information.profit.number')}` }}</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { requestApi } from '@/api';
import { onLoad, onPullDownRefresh } from '@dcloudio/uni-app';
import { formateDate } from '@/utils/formatter';
import { Decimal } from 'decimal.js';
// 返回上一层
function navigateBack() {
    let canNavBack = getCurrentPages()
    if (canNavBack && canNavBack.length > 1) {
        uni.navigateBack()
    } else {
        history.back();
    }
}
// 跳转
const routerTodetail = (code, id) => {
    uni.navigateTo({
        url: `/pages/market/market-detail?code=${JSON.stringify(code)}&nobuy=${JSON.stringify(false)}&id=${JSON.stringify(id)}`
    })
}

const applyInfo = ref([])
const option = reactive({
    stockCode: '',
    stockName: '',
    status: 0
})
// 新股申购列表
async function getRedStockList() {
    const { status, data, code } = await requestApi.getRedStockList(option)
    if (code) {
        code == 401 && uni.navigateTo({ url: '/pages/login/login' })
    } else {
        if (status == 0) {
            const { list } = data
            applyInfo.value = list.map((item) => {
                let { stockCode, stockName, provideNum } = item
                provideNum = new Decimal(provideNum)
                const priNum = provideNum.dividedBy(1000)
                // console.log(item);
                return {
                    symbol: stockCode.match(/^[^\.]+/)[0],
                    ...item,
                    priNum
                }
            })
        }
    }
    return status
}

onLoad(() => {
    getRedStockList()
})
// 下拉
onPullDownRefresh(async () => {
    const status = await getRedStockList()
    if (status == 0) {
        uni.stopPullDownRefresh();
    }
})
</script>

<style lang="scss">
page {
    background-color: #171921;
}

.header {
    width: 100%;
    height: 88rpx;
    padding-top: 20rpx;
    //  #ifndef H5
    padding-top: 80rpx;
    //  #endif
    padding-bottom: 15rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    background-color: #202129;

    .title {
        text-align: center;
        color: #fff;
        margin: 0 auto;
        padding-right: 104rpx;
        font-size: 32rpx;
    }

    .img-title {
        width: 58rpx;
        height: 58rpx;
        margin-left: 46rpx;
    }
}



.swiper-item {
    padding-top: 108rpx;
    //  #ifndef H5
    padding-top: 196rpx;
    //  #endif
    width: 100%;
    padding-left: 40rpx;
    padding-right: 40rpx;
    color: #fff;

    .item1 {
        position: relative;
        background-color: #20212A;
        width: 670rpx;
        height: 230rpx;
        border-radius: 45rpx;
        margin: 32rpx auto 0rpx;
        padding-top: 15rpx;

        .first-line {
            display: flex;
            padding-left: 28rpx;
            padding-right: 44rpx;
            align-items: center;

            .left {
                display: flex;
                align-items: center;

                .stock-name {
                    font-size: 32rpx;
                }

                .stock-code {
                    font-size: 24rpx;
                    color: #7E8394;
                    margin-left: 8rpx;
                }
            }

            .right {
                margin-left: auto;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;

                .more {
                    width: 57rpx;
                    height: 57rpx;
                    margin-bottom: 8rpx;
                }


            }
        }

        .second-line {
            margin-top: 30rpx;
            margin-left: 50rpx;
            margin-right: 68rpx;
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            grid-template-rows: repeat(2, minmax(0, 1fr));
            column-gap: 57rpx;
            row-gap: 10rpx;

            .view {
                display: flex;
                justify-content: space-between;

                .key {
                    color: #7E8394;
                    font-size: 20rpx;
                }


            }
        }
    }
}
</style>